/**
 * @Author: easten
 * @Created: 2024-07-20 23:42:47
 * @Description: 站点管理组件
 *
 */

import { ApiStation } from "_common/api/iot/ApiStation";
import { PageParams } from "_common/DataType";
import { IotStation } from "_common/entity";
import { AxiosInstance } from "axios";
import classNames from "classnames";
import TableTitle from "components/common/TableTitle";
import React, { useState, useEffect } from "react";
import { RefreshIcon } from "tdesign-icons-react";
import { Button, MessagePlugin, Popconfirm, Space, Table } from "tdesign-react";
import StationDrawer from "./StationDrawer";
type IotStationCompProps = {
  axios: AxiosInstance;
  className?: string;
};
const IotStationComp: React.FC<IotStationCompProps> = (
  props: IotStationCompProps
) => {
  const { axios, className } = props;
  const [selectedRowKeys, setSelectedRowKeys] = useState<(string | number)[]>([
    1, 2,
  ]);
  const [loading, setLoading] = useState<boolean>(false);
  const [stationList, setStationList] = useState<IotStation[]>([]);
  const [selectedRow, setSelectedRow] = useState<IotStation>();
  const [userName, setStationName] = useState<string>();
  const [pageState, setPageState] = useState<PageParams>({
    pageNum: 1,
    pageSize: 10,
    total: 0,
    list: [],
  });

  const [visible, setVisible] = useState(false);
  const [edit, setEdit] = useState(false);
  const apiStation = new ApiStation(axios);

  function onSelectChange(value: (string | number)[]) {
    setSelectedRowKeys(value);
  }

  useEffect(() => {
    getStationList();
  }, [userName]);

  const getStationList = async () => {
    const response = await apiStation.getPage({
      ...pageState,
    });
    if (response && response.code == 200 && response.data) {
      setStationList(response.data.list);
      setPageState({
        ...pageState,
        total: response.data.total,
        list: response.data.list,
      });
    }
  };

  // 删除
  const deleteStation = async (id: number) => {
    const response = await apiStation.delete(id);
    if (response && response.code == 200 && response.data) {
      MessagePlugin.success("删除成功");
      getStationList();
    }
  };

  return (
    <div className={classNames(className)}>
      <div className="flex flex-row justify-between mb-4">
        <TableTitle text="站点列表" />
        <Space size={5}>
          <Button
            onClick={() => {
              setVisible(true);
              setEdit(false);
            }}
          >
            添加站点
          </Button>
          <Button
            icon={<RefreshIcon />}
            variant="outline"
            onClick={() => {
              getStationList();
            }}
          ></Button>
        </Space>
      </div>

      <Table<IotStation>
        bordered
        columns={[
          {
            align: "left",
            width: 80,
            ellipsis: true,
            colKey: "index",
            title: "序号",
            cell: ({ rowIndex }) => {
              let _index =
                (pageState.pageNum - 1) * pageState.pageSize + rowIndex + 1;
              return <span>{_index}</span>;
            },
          },
          {
            align: "left",
            ellipsis: true,
            colKey: "name",
            title: "站点名称",
          },
          {
            align: "left",
            ellipsis: true,
            colKey: "code",
            title: "站点编码",
          },

          {
            align: "left",
            ellipsis: true,
            colKey: "location",
            title: "站点地址",
          },
          {
            align: "left",
            ellipsis: true,
            colKey: "desc",
            title: "描述",
          },
          {
            align: "center",
            fixed: "right",
            width: 220,
            colKey: "op",
            title: "操作",
            cell({ row }) {
              return (
                <>
                  <Button
                    theme="success"
                    variant="text"
                    onClick={() => {
                      setVisible(true);
                      setEdit(true);
                      setSelectedRow(row);
                    }}
                  >
                    编辑
                  </Button>
                  <Popconfirm
                    content="确认删除吗"
                    destroyOnClose
                    placement="top"
                    showArrow
                    theme="default"
                    onConfirm={() => deleteStation(row.id)}
                  >
                    <Button theme="primary" variant="text">
                      删除
                    </Button>
                  </Popconfirm>
                </>
              );
            },
          },
        ]}
        loading={loading}
        data={stationList}
        rowKey="index"
        selectedRowKeys={selectedRowKeys}
        verticalAlign="middle"
        hover
        onSelectChange={onSelectChange}
        pagination={{
          pageSize: pageState.pageSize,
          total: pageState.total,
          current: pageState.pageNum,
          showJumper: true,
          onCurrentChange(current, pageInfo) {},
          onPageSizeChange(size) {},
        }}
      />
      <StationDrawer
        axios={axios}
        open={visible}
        edit={edit}
        value={selectedRow}
        onSuccess={(v) => {
          setVisible(false);
          getStationList();
        }}
      />
    </div>
  );
};
export default IotStationComp;
